<template>
  <div :class="[posterImageStatus ? 'noscroll product-con' : 'product-con']">
    <product-con-swiper :imgUrls="storeInfo.slider_image"></product-con-swiper>
    <div class="wrapper">
      <div class="share acea-row row-between row-bottom">
        <div class="money font-color-red">
          ￥<span class="num">{{ storeInfo.price }}</span
          ><span
            class="vip-money"
            v-if="storeInfo.vip_price && storeInfo.vip_price > 0"
            >￥{{ storeInfo.vip_price }}</span
          ><img
            src="@assets/images/vip.png"
            class="image"
            v-if="storeInfo.vip_price && storeInfo.vip_price > 0"
          />
        </div>
        <div class="iconfont icon-fenxiang" @click="listenerActionSheet"></div>
      </div>
      <div class="introduce">{{ storeInfo.store_name }}</div>
      <div class="label acea-row row-between-wrapper">
        <div>原价:￥{{ storeInfo.ot_price }}</div>
        <div>库存:{{ storeInfo.stock }}{{ storeInfo.unit_name }}</div>
        <div>销量:{{ storeInfo.fsales }}{{ storeInfo.unit_name }}</div>
      </div>
      <div
        class="coupon acea-row row-between-wrapper"
        @click="couponTap"
        v-if="couponList.length"
      >
        <div class="hide line1 acea-row">
          优惠券：
          <div
            class="activity"
            v-for="(item, index) in couponList"
            :key="index"
          >
            满{{ item.use_min_price }}减{{ item.coupon_price }}
          </div>
        </div>
        <div class="iconfont icon-jiantou"></div>
      </div>
    </div>
    <div class="attribute acea-row row-between-wrapper" @click="selecAttrTap">
      <div>
        {{ attrTxt }}：<span class="atterTxt">{{ attrValue }}</span>
      </div>
      <div class="iconfont icon-jiantou"></div>
    </div>
    <div class="userEvaluation" v-if="replyCount">
      <div class="title acea-row row-between-wrapper">
        <div>用户评价({{ replyCount }})</div>
        <router-link :to="{ path: '/evaluate_list/' + id }" class="praise"
          ><span class="font-color-red">{{ replyChance }}%</span>好评率<span
            class="iconfont icon-jiantou"
          ></span
        ></router-link>
      </div>
      <user-evaluation :reply="reply"></user-evaluation>
    </div>
    <div class="product-intro">
      <div class="title">产品介绍</div>
      <div class="conter" v-html="storeInfo.description"></div>
    </div>
    <div style="height:1.2rem;"></div>
    <div class="footer acea-row row-between-wrapper">
      <div class="item" @click="$router.push({ path: '/customer/list' })">
        <div class="iconfont icon-kefu"></div>
        <div>客服</div>
      </div>
      <!-- <div class="item" @click="setCollect"> -->
      <div class="item" @click="Collect">
        <div
          class="iconfont"
          :class="storeInfo.userCollect ? 'icon-shoucang1' : 'icon-shoucang'"
        ></div>
        <div>收藏</div>
      </div>
      <router-link
        :to="'/cart'"
        class="item animated"
        :class="animated === true ? 'bounceIn' : ''"
      >
        <div class="iconfont icon-gouwuche1">
          <!-- <span class="num bg-color-red" v-if="CartCount > 0">{{
            CartCount
          }}</span> -->
        </div>
        <div>购物车</div>
      </router-link>
      <div class="bnt acea-row">
        <!-- <div class="joinCart" @click="joinCart">加入购物车</div> -->
        <div class="joinCart" @click="addShopCar">加入购物车</div>
        <div class="buy" @click="tapBuy">立即购买</div>
        <!-- <div class="buy" @click="Buy">立即购买</div> -->
      </div>
    </div>
    <Share-red-packets
      :priceName="priceName"
      v-on:changeFun="changeFun"
      v-if="priceName !== 0"
    ></Share-red-packets>
    <CouponPop v-on:changeFun="changeFun" :coupon="coupon"></CouponPop>
    <Product-window v-on:changeFun="changeFun" :attr="attr"></Product-window>
    <StorePoster
      v-on:setPosterImageStatus="setPosterImageStatus"
      :posterImageStatus="posterImageStatus"
      :posterData="posterData"
    ></StorePoster>
    <ShareInfo
      v-on:setShareInfoStatus="setShareInfoStatus"
      :shareInfoStatus="shareInfoStatus"
    ></ShareInfo>
    <div
      class="generate-posters acea-row row-middle"
      :class="posters ? 'on' : ''"
    >
      <div
        class="item"
        v-if="weixinStatus === true"
        @click="setShareInfoStatus"
      >
        <div class="iconfont icon-weixin3"></div>
        <div class="">发送给朋友</div>
      </div>
      <div class="item" @click="setPosterImageStatus">
        <div class="iconfont icon-haibao"></div>
        <div class="">生成海报</div>
      </div>
    </div>
    <div
      class="mask"
      @touchmove.prevent
      @click="listenerActionClose"
      v-show="posters"
    ></div>
  </div>
</template>
<style>
.mask {
  -webkit-filter: blur(2px);
  -moz-filter: blur(2px);
  -ms-filter: blur(2px);
  filter: blur(2px);
}
.footer .icon-shoucang1 {
  color: #e93323;
}
.product-con .product-intro .conter div {
  width: 100% !important;
}
.generate-posters {
  width: 100%;
  height: 1.7rem;
  background-color: #fff;
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: 99;
  transform: translate3d(0, 100%, 0);
  -webkit-transform: translate3d(0, 100%, 0);
  -ms-transform: translate3d(0, 100%, 0);
  -moz-transform: translate3d(0, 100%, 0);
  -o-transform: translate3d(0, 100%, 0);
  transition: all 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9);
  -webkit-transition: all 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9);
  -moz-transition: all 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9);
  -o-transition: all 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9);
}
.generate-posters.on {
  transform: translate3d(0, 0, 0);
  -webkit-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
}
.generate-posters .item {
  flex: 50%;
  -webkit-flex: 50%;
  -ms-flex: 50%;
  text-align: center;
}
.generate-posters .item .iconfont {
  font-size: 0.8rem;
  color: #5eae72;
}
.generate-posters .item .iconfont.icon-haibao {
  color: #5391f1;
}
.noscroll {
  height: 100%;
  overflow: hidden;
}
</style>
<script>
import ProductConSwiper from '@components/ProductConSwiper';
import ShareRedPackets from '@components/ShareRedPackets';
import ProductWindow from "@components/ProductWindow";
import StorePoster from "@components/StorePoster";
import { Toast } from 'vant';
export default {
  inject:['reload'],
  name:"GoodsCon",
  components:{
    ProductConSwiper,
    ProductWindow,
    StorePoster
  },
  data() {
    return {
      attr:{
        cartAttr:false,
        productSelect:{
          image:"http://activity.crmeb.net/public/uploads/attach/2019/05/30//0eecbfbca9ebc315c2882590fd55a209.jpg",
          store_name:"伊利酸奶畅轻整箱装乳酸菌燕麦黄桃草莓早餐奶250克9瓶风味发酵乳",
          price:"80.00",
          stock:"937",
          cart_num:"1"
        },
        prodectAttr:{
          attr_name:"1",
          index:0,
          attr_value:{
            attr:"1"
          }
        }
      },
      priceName:1,
      storeInfo: {
        userCollect:false,
        id: 11,
        price: "80.00",
        store_name:
          "伊利酸奶畅轻整箱装乳酸菌燕麦黄桃草莓早餐奶250克9瓶风味发酵乳",
        ot_price: 80.0,
        stock: 937,
        unit_name: "件",
        fsales: 73,
        slider_image: ["http://activity.crmeb.net/public/uploads/attach/2019/05/30//0eecbfbca9ebc315c2882590fd55a209.jpg","http://activity.crmeb.net/public/uploads/attach/2019/05/30//1a730a7edcb0c373f8188b4d6090999e.jpg","http://activity.crmeb.net/public/uploads/attach/2019/05/30//1da1cff5adc9c053022373596032cbb4.jpg","http://activity.crmeb.net/public/uploads/attach/2019/05/30//d116eb69f06169eed8efd06fcd4dcb90.jpg","http://activity.crmeb.net/public/uploads/attach/2019/05/30//33f645b107441db0b05eaa428a888ac6.jpg"
        ],
        description:
          "<div style='display:block;width:100%'><img style='display:block;width:100%' src='http://activity.crmeb.net/public/uploads/attach/2019/05/30//4466609a8fd2572a4366a0786f7893a5.jpg'/><img style='display:block;width:100%' src='http://activity.crmeb.net/public/uploads/attach/2019/05/30//f37e16bbbc014195001bc16fcc6cae63.jpg'/><img style='display:block;width:100%' src='http://activity.crmeb.net/public/uploads/attach/2019/05/30//960bad190414f774241379ccdf073576.jpg'/><img style='display:block;width:100%' src='http://activity.crmeb.net/public/uploads/attach/2019/05/30//8f20a9984fd968785de5e32053be9747.jpg'/><img style='display:block;width:100%' src='http://activity.crmeb.net/public/uploads/attach/2019/05/30//c00e4506123402f687405c69b80bb5c8.jpg'/><img style='display:block;width:100%' src='http://activity.crmeb.net/public/uploads/attach/2019/05/30//e8bccebd6534055129a8af8c488528a3.jpg'/><img style='display:block;width:100%' src='http://activity.crmeb.net/public/uploads/attach/2019/05/30//547c56bac0eb97085b776234e6104d42.jpg'/><img style='display:block;width:100%' src='http://activity.crmeb.net/public/uploads/attach/2019/05/30//ebd3cccb57e2d1b7a06b18fb1ee19978.jpg'/><img style='display:block;width:100%' src='http://activity.crmeb.net/public/uploads/attach/2019/05/30//a2981e2259068977cb15205d5516046b.jpg'/><img style='display:block;width:100%' src='http://activity.crmeb.net/public/uploads/attach/2019/05/30//e768dca53e023a3a79215fe2f2cf25fb.jpg'/><img style='display:block;width:100%' src='http://activity.crmeb.net/public/uploads/attach/2019/05/30//57ad0f7b95a510e91f5c080cd0ef45f0.jpg'/><img style='display:block;width:100%' src='http://activity.crmeb.net/public/uploads/attach/2019/05/30//3b2c7bafc9bfba1e01da50f2d44da19c.jpg'/><img style='display:block;width:100%' src='http://activity.crmeb.net/public/uploads/attach/2019/05/30//4af68ddf547e251bc349daac6b7ddc21.jpg'/><img style='display:block;width:100%' src='http://activity.crmeb.net/public/uploads/attach/2019/05/30//c59c6f708dda1ac28df3f627b1543f4e.jpg'/><img style='display:block;width:100%' src='http://activity.crmeb.net/public/uploads/attach/2019/05/30//a4cfd1a15c188d1c7793dcd6762c607f.jpg'/><img style='display:block;width:100%' src='http://activity.crmeb.net/public/uploads/attach/2019/05/30//83d0a242bbf6c4fce431da5a45ba72dc.jpg'/><img style='display:block;width:100%' src='http://activity.crmeb.net/public/uploads/attach/2019/05/30//c56ca302f42d2d16a770d3f87796e614.jpg'/><img style='display:block;width:100%' src='http://activity.crmeb.net/public/uploads/attach/2019/05/30//7d2008368b7a9122465c34f459ed55d7.jpg'/><img style='display:block;width:100%' src='http://activity.crmeb.net/public/uploads/attach/2019/05/30//cfef919448f30e5b433572edbd316ef5.jpg'/><img style='display:block;width:100%' src='http://activity.crmeb.net/public/uploads/attach/2019/05/30//793c7f0f2d8cdc74c7d94dc9c5a3d125.jpg'/><img style='display:block;width:100%' src='http://activity.crmeb.net/public/uploads/attach/2019/05/30//0d8fd269982df7991462bffcb92904f1.jpg'/></div>"
      },
      couponList: [
        {
          use_min_price: 80,
          coupon_price: 13
        },
        {
          use_min_price: 160,
          coupon_price: 25
        }
      ],
      attrTxt: "请选择",
      attrValue: "1件",
      replyCount: "56",
      replyChance: "100",
      CartCount:1
    };
  },
  watch: {
    $route(n){
      if(n.name==="GoodsCon"){
        // this.CartCount;
        this.addShopCar();
        if(sessionStorage.getItem('Count')!==null){
          // this.CartCount=sessionStorage.getItem('Count');
          var Count=sessionStorage.getItem('Count');
          this.$set(data,'CartCount',Count);
        }
        this.storeInfo.userCollect;
        this.Collect();
        // this.$set(this.storeInfo,'userCollect',true);
      }
    }
 },
 mounted(){
  sessionStorage.setItem('Collect',1);
 },
  methods:{
    // 加入购物车
    addShopCar(){
      if(sessionStorage.getItem('CartNum')===null || this.attr.cartAttr===false){
        this.selecAttrTap();
        return;
      }else{
        this.$set(this.attr,'cartAttr',false);
        Toast('加购成功');
      }
      this.CartCount=sessionStorage.getItem('CartNum');
      // console.log(this.CartCount);
      var goods={
        id:this.storeInfo.id,
        price:this.storeInfo.price,
        store_name:this.storeInfo.store_name,
        count:this.CartCount
      }
      // console.log(goods.count);
      // console.log(this.CartCount);
      // console.log(goods);
      sessionStorage.setItem('state',JSON.stringify(goods));
    },
    // 旧方法↓↓↓
    /*addShopCar(){
      // console.log(this.CartCount);
      Toast('加购成功');
      if(sessionStorage.getItem('Count')!==null){
        this.CartCount=sessionStorage.getItem('Count');
      }
      this.CartCount++;
      // this.$set(this.data,'CartCount',this.CartCount);
      // console.log(JSON.parse(this.data));
      // console.log(this.data.CartCount);
      sessionStorage.setItem('Count',this.CartCount);
      console.log(this.CartCount);
      var goods={
        
        id:this.storeInfo.id,
        price:this.storeInfo.price,
        store_name:this.storeInfo.store_name,
        count:this.CartCount
      }
      console.log(goods.count);
      // console.log(this.CartCount);
      // console.log(goods);
      sessionStorage.setItem('state',JSON.stringify(goods));
      this.reload();
    },*/
    // 收藏
    Collect(){
      // console.log(111);//打印成功
      // this.storeInfo.userCollect=true;
      // if(_wrapper===undefined){
      //   console.log('有错误，不执行');
      //   throw err;
      // }
      if(this.storeInfo.userCollect===false){
        // console.log(222);//打印成功
        this.$set(this.storeInfo,'userCollect',true);
        // console.log(333);//打印成功
      }else{
        this.reload();
      }
    },
    // 立即购买
    tapBuy(){
      if(sessionStorage.getItem('Collect')==1){
        // console.log(111);
        this.selecAttrTap();
        sessionStorage.setItem('Collect',2);
      }else{
        this.$router.push({ path: "/order/submit/" + 11 });
        sessionStorage.setItem('Collect',1);
      }
    },
    //调出规格页
    selecAttrTap(){
      this.$set(this.attr,'cartAttr',true);
      // console.log(this.attr.cartAttr);
      sessionStorage.setItem('CartNum',1);
    },
    listenerActionSheet(){},
    couponTap(){},
    setShareInfoStatus(){},
    setPosterImageStatus(){},
    listenerActionClose(){},
  }
};
</script>
